<template>
  <!-- 将每一个收藏的详情展示-->
  <div class="show-details">
    <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
      <router-link to="/404" class="colto"><li v-for="collection in collections" class="infinite-list-item every-col" v-bind:key="collection"> ☆ {{collection.title}}</li></router-link>
    </ul>
  </div>

</template>

<script>
export default{
  name: 'coldetails',
  data () {
    return {
      collections: [
        {
          lingto: 'www.baidu.com',
          title: '百度'
        },
        {
          lingto: 'www.baidu.com',
          title: '百度'
        },
        {
          lingto: 'www.baidu.com',
          title: '百度'
        },

        {
          lingto: 'www.baidu.com',
          title: '百度'
        },
        {
          lingto: 'www.baidu.com',
          title: '百度'
        },

        {
          lingto: 'www.baidu.com',
          title: '百度'
        },
        {
          lingto: 'www.baidu.com',
          title: '百度'
        },
        {
          lingto: 'www.baidu.com',
          title: '百度'
        },
        {
          lingto: 'www.baidu.com',
          title: '百度'
        },
        {
          lingto: 'www.baidu.com',
          title: '百度'
        },
        {
          lingto: 'www.baidu.com',
          title: '百度'
        },
        {
          lingto: 'www.baidu.com',
          title: '百度2'
        },
        {
          lingto: 'www.baidu.com',
          title: '百度2'
        },
        {
          lingto: 'www.baidu.com',
          title: '百度2'
        },
        {
          lingto: 'www.baidu.com',
          title: '百度2'
        },
        {
          lingto: 'www.baidu.com',
          title: '百度2'
        },
        {
          lingto: 'www.baidu.com',
          title: '百度2'
        }

      ]

    }
  }

}
</script>

<style>
  .show-details{
    height: 520px;
  }
  .infinite-list{
    height: 500px;

    list-style: none;
  }
  .every-col{
    border: gainsboro 1px solid;
    margin-bottom: 6px;
    height: 26px;
    text-align:left;
    padding-top: 12px;
  }
  .every-col {
    color: #000000;
    text-decoration: none;
    margin-top: 10px;
    font-size: 15px;
    font-family: 宋体;
    width: 90%;
  }
  .every-col:hover {
    color: #F40;

  }

  .every-col:hover{
    background-color: whitesmoke;
  }
  .colto{
    text-decoration: none;
  }
</style>
